[자바스크립트] 스톱워치, 타이머 함수 만들기, 초시계 구현

자바스크립트를 사용하여 스톱워치, 타이머 기능의 함수를 만들어보려고 합니다. 아래에서 자세히 알아봅니다

# 자바스크립트로 타이머, 스톱워치 함수 만들기

먼저 이 기능은 언제 필요할까요? 간단하게 나열하면 다음과 같습니다.

- 함수를 호출시 너무 빠른 간격으로는 호출하지 않을 경우(Debounce 설정)
- 정해진 시간 뒤에 함수를 호출할 경우

그럼 전체 소스 코드를 먼저 살펴봅니다.

@ timer.js

타이머를 동작하려면 아래와 같이 사용합니다.

위 예제는 10초를 설정하였습니다. 이제 timer()를 실행하면 계속해서 남아있는 시간이 반환됩니다.

# 스톱워치 코드 자세히 알아보기

위 함수는 어떻게 작성되었는지 하나하나 구분하여 알아보겠습니다. 일단 구현 프로세스를 나열하면 아래와 같습니다.

- 클로저(Closure)로 Private 함수를 생성
- 설정된 시간을 _oriTime이라는 변수에 따로 저장함
- 시간을 100ms 계속 감소시킴(재귀함수를 호출, 자기 함수를 호출, self-invoking function)
- 이때 남은 시간이 100ms 이하가 될 때 까지 계속 


여기까지가 모든 과정의 끝입니다.

! 타이머가 종료시 특정 함수를 호출하게 하려면? 

만약 타이머가 끝나 자동으로 특정 함수를 호출한다면? 예를들어 closeAll()이라는 함수를 호출한다면 아래와 같이 수정해야 합니다.

@ 코드 12번 라인

위 코드에서 0을 반환하기 전에 함수를 호출하면되겠죠.

이제 타이머가 끝나면 closeAll()을 호출하게 됩니다.